<template>
    <div class="home">
        <el-container>
            <el-aside width="200px">
                <div class="asideHead">
                    <div class="pic">
                        <router-link to="">
                            <img src="../assets/u=1522420942,2324605756&fm=26&gp=0.jpg" alt="">
                        </router-link>
                        <p>{{$store.getters.getActUserName}}</p>
                    </div>
                </div>
                 <div class="asideMenu">
                        <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        :unique-opened='true'
                        :router ='true'
                        active-text-color="#ffd04b">
                            <el-menu-item index="/user">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    用户管理
                                </template>
                            </el-menu-item>
                            <el-submenu index="/manage">
                                <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>分类管理</span>
                                </template>
                                <el-menu-item index="/manageByfirst">一级分类管理</el-menu-item>
                                <el-menu-item index="/manageBysecond">二级分类管理</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/goodsManage">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    商品管理
                                </template>
                            </el-menu-item>
                        </el-menu>
                    </div>
            </el-aside>
            <el-container>
                <el-header>
                    <a  class="header_icon ">
                        <span class="myicon myicon-menu"></span>
                    </a>
                    <span class="title">后台管理系统</span>
                    <span class="home_username">{{$store.getters.getActUserName}}   <a href="javascript:;" @click='loginOut'>退出</a></span>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    console.log(this.$store)
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    loginOut () {
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style lang="less" scopesd>
.home,.el-aside,.el-container{
    height: 100%;
}
.asideHead{
    height: 25%;
    background-color: #243443;
    position: relative;
    .pic{
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        text-align:center;
        color: #ccc;
        a{
            background-color: #fff;
            display: block;
            height: 80px;
            width: 80px;
            border-radius: 50px;
            box-shadow: 0px 0px 2px 3px #ccc;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        p{
            padding-top: 10px;
            color: #a9b0c2;
        }
    }
}
.asideMenu{
    height: 75%;
    background-color: #434a50;
}
.el-menu{
    border: 0px;
}
// 头部
.el-header{
    background-color: #434a50;
    color: #fff;
    line-height: 60px;
    a.header_icon{
        font-size: 30px;
        width: 33.33%;
        float: left;
    }
    .title{
        width: 33.33%;
        float: left;
        text-align: center;
        font-size: 24px;
    }
    .home_username{
        width:33.33%;
        float: right;
        text-align: right;
    }
}

</style>
